<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>test</title>
		<meta name="Description" content="" />
		<meta name="Keywords" content="" />

		<script type="text/javascript" src="../core/Jidea-core.js"></script>
		<script type="text/javascript" src="../core/Jidea-event.js"></script>
		<script type="text/javascript" src="../core/Jidea-math.js"></script>
		<script type="text/javascript" src="../core/Jidea-assert.js"></script>
		<script type="text/javascript" src="../core/Jidea-painter.js"></script>
		<script type="text/javascript" src="../core/Jidea-component.js"></script>
		<script type="text/javascript" src="../core/Jidea-interface.js"></script>
		<script type="text/javascript" src="../core/Jidea-legend.js"></script>
		<script type="text/javascript" src="../core/Jidea-label.js"></script>
		<script type="text/javascript" src="../core/Jidea-style.js"></script>
		<script type="text/javascript" src="../core/Jidea-chart.js"></script>
		<script type="text/javascript" src="../core/Jidea-coordinate.js"></script>
		<script type="text/javascript" src="../core/Jidea-element.js"></script>
		<script type="text/javascript" src="../core/Jidea-crosshair.js"></script>
		<script type="text/javascript" src="../core/Jidea-tip.js"></script>
		<script type="text/javascript" src="../core/Jidea-rectangle.js"></script>
		<script type="text/javascript" src="../core/Jidea-rectangle2d.js"></script>
		<script type="text/javascript" src="../core/Jidea-rectangle3d.js"></script>
		<script type="text/javascript" src="../core/Jidea-column.js"></script>
		<script type="text/javascript" src="../core/Jidea-column3d.js"></script>
		<script type="text/javascript" src="../core/Jidea-custom.js"></script>
		<script type="text/javascript" src="data.js"></script>
		<style type="text/css">
			body{
				margin-top:10px;
				text-align: center;
			}
			#myCanvas div{
				margin:0px auto;
			}
			#wrap{
				width:500px;
				height:500px;
				border:1px solid green;
				position: relative;
			}
			.test01{
				background-color: #76a871;
				height:100px;
				width:100px;
				position: absolute;
				top:0px;
				left:0px;
			}
			.test02{
				background-color: #a56f8f;
				width:100px;
				height:100px;
				position: absolute;
				left:200px;
				top:0px;
			}
		</style>
		<script type="text/javascript">
			var chart;
					$(function(){
						var clientWidth =1000;//document.body.clientWidth;
						//offsetWidth
						chart = new Jidea.Chart({
							render : 'myCanvas',
							background_color:'#FEFEFE',
							width:clientWidth,
							height:600
						});
					var width = 200,space=120;
					
					chart.plugin(new Jidea.Custom({
						drawFn:function(){
							var color = '#76a871';
							//this.target.sector(350,262.5,140,0.7853981633974483,1.996614608154959,color,true,1,'#DEDEDE',true,'#666666',4,0,0,false,true);
							//this.target.arc(200,200,200,0,Math.PI/3,color,false,1,'#DEDEDE',true,'#666666',4,0,0,false,true);
							
							//this.target.arc(200,200,200,0,Math.PI/3,color,false,1,'#DEDEDE',true,'#666666',6,0,0,false,true,false);
							
							//this.target.sector(200,200,200,Math.PI*2/3,Math.PI,color,true,1,'#DEDEDE',true,'#666666',4,0,0,false,true);
							//this.target.arc(200,200,200,Math.PI*2/3,Math.PI,color,true,1,'#DEDEDE',true,'#666666',4,0,0,false,true);
							
							//var g = this.target.avgLinearGradient(0,0,0,200,[color,'#ffffff']);
							
							//this.target.rectangle(200,200,200,200,g,false,1,'#333333',false,'#666666',4,0,0);
							
							var g = this.target.avgRadialGradient(200,200,100,200,200,200,[Jidea.Math.light(color,0.2),color]);
							
							this.target.arc(200,200,200,0,Math.PI/3,g,false,1,'#DEDEDE',true,'#666666',6,0,0,false,true,false);
							
							
							//this.target.rectangle(0,0,1000,600,g);
							
						}
					}));
					
					chart.draw();
				});
				function expand(){
					//console.log(chart.toImageURL());
					window.open(chart.toImageURL());
				}
			</script>
		</head>
		<body>
			<div><a href="../index.html">Home</a>&nbsp; Sample</div>
			<br>
			<div id='myCanvas'></div>
			<button onclick="expand();">expand</button>
		</body>
</html>
